﻿<template>
  <div>
    <EventComponent
        @login="handleLogin"
        @logout="handleLogout"
        @data-fetched="handleDataFetched"
    />
    <div v-if="loginStatus">Logged in as: {{ userDetails.username }}</div>
    <div v-if="data">Received data: {{ data }}</div>
  </div>
</template>

<script>
import EventComponent from './Components/EventComponent.vue';

export default {
  components: {
    EventComponent
  },
  data() {
    return {
      loginStatus: false,
      userDetails: {},
      data: ''
    };
  },
  methods: {
    handleLogin(payload) {

      console.log('Login event triggered with:', payload);
      this.userDetails = payload;
      this.loginStatus = true;
    },
    handleLogout() {
      console.log('Logout event triggered');
      this.userDetails = {};
      this.loginStatus = false;
    },
    handleDataFetched(payload) {
      console.log('Data fetched event triggered with:', payload);
      this.data = payload.data;
    }
  }
}
</script>
